<template>
  <s-modal
    title="选择"
    :visible="visible"
    :width="width"
    ok-text="确定"
    @ok="confirm()"
    @cancel="visible = false"
  >
    <div :style="{ height: height }">
      <s-scroll>
        <a-tree
          v-model:checked-keys="selected"
          :checkable="true"
          :tree-data="treeData"
          :check-strictly="true"
          :expanded-keys="expandedKeys"
          :field-names="{
            children: 'children',
            title: labelField,
            key: valueField
          }"
          @expand="expand"
          @check="onCheck"
        />
      </s-scroll>
    </div>
  </s-modal>
</template>
<script>
import { buildTree, findAllChildrenKeys } from '@/utils/tree'
export default {
  name: 'STreeModal',
  props: {
    url: {
      type: String,
      required: false
    },
    save: {
      type: Function,
      required: false
    },
    expandAll: {
      type: Boolean,
      default: true
    },
    checkChildren: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '300px'
    },
    height: {
      type: String,
      default: '400px'
    },
    selectUrl: {
      type: String,
      required: false
    },
    code: {
      type: String,
      required: false
    },
    labelField: {
      type: String,
      default: 'text'
    },
    valueField: {
      type: String,
      default: 'value'
    },
    keyField: {
      type: String,
      default: 'id'
    },
    parentKeyField: {
      type: String,
      default: 'parentId'
    }
  },
  data() {
    return { visible: false, treeData: [], selected: [], expandedKeys: [], allKeys: [] }
  },
  watch: {
    selectUrl() {
      this.selected = []
      this.loadSelected()
    },
    url(val) {
      this.treeData = []
      this.loadData()
    },
    code(val) {
      this.treeData = []
      this.loadData()
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    expand(e) {
      this.expandedKeys = e
    },
    loadSelected() {
      if (this.selectUrl) {
        this.$api.GET(this.selectUrl).then((res) => {
          const keys = []
          if (res.data) {
            res.data.forEach((item) => {
              if (typeof item == 'string' && item.constructor == String) {
                keys.push(item)
              } else {
                keys.push(item[this.valueField])
              }
            })
          }
          this.selected = keys
        })
      }
    },
    loadData() {
      this.expandedKeys = []
      if (this.url) {
        this.$api.GET(this.url).then((res) => {
          if (res.data) {
            this.allKeys = []
            res.data.forEach((item) => {
              this.allKeys.push(item[this.keyField])
            })
            this.treeData = buildTree(res.data, this.parentKeyField, this.keyField)
            if (this.expandAll) {
              res.data.forEach((item) => {
                this.expandedKeys.push(item[this.valueField])
              })
            }
          }
        })
      } else if (this.code) {
        this.$api.GET('/data/tree/item/selectListByGroupId', { groupId: this.code }).then((res) => {
          if (res.data) {
            this.allKeys = []
            res.data.forEach((item) => {
              this.allKeys.push(item[this.keyField])
            })
            this.treeData = buildTree(res.data, this.parentKeyField, this.keyField)
            if (this.expandAll) {
              res.data.forEach((item) => {
                this.expandedKeys.push(item[this.valueField])
              })
            }
          }
        })
      }
    },
    open() {
      this.visible = true
    },
    confirm() {
      const data = []
      if (this.save) {
        // 只存入已有的key
        if (this.selected) {
          this.selected.forEach((item) => {
            const hasKey = this.allKeys.find((v) => {
              return v == item
            })
            if (hasKey) {
              data.push(item)
            }
          })
        }
        this.save(data)
      }
      this.visible = false
    },
    onCheck(checkedKeys, e) {
      let checked = checkedKeys.checked
      if (!checked) {
        checked = []
      }
      if (e.checked && this.checkChildren) {
        const p = e.node.eventKey
        // 使其子节点check
        const array = findAllChildrenKeys(this.treeData, this.valueField, p)
        if (array.length > 0) {
          array.forEach((item) => {
            if (!checked.includes(item)) {
              checked.push(item)
            }
          })
        }
      }
      this.selected = checked
    }
  }
}
</script>
